<template>
    <div class="up">
        <div class="left">
            <el-form ref="formRef" :model="form" inline label-width="0">
                <el-form-item prop="username">
                    <el-input v-model.trim="form.username" placeholder="请输入姓名" style="width: 120px"/>
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                            v-model="form.time"
                            :clearable="false"
                            :shortcuts="shortcuts"
                            end-placeholder="结束日期"
                            range-separator="到"
                            start-placeholder="开始日期"
                            style="width: 200px"
                            type="daterange"
                            value-format="YYYY-MM-DD"
                    />
                </el-form-item>
                <el-button :icon="Search" plain type="primary" @click="searchVol"/>
                <el-button :icon="Refresh" plain type="info" @click="reFresh(formRef)"/>
            </el-form>
        </div>
    </div>
</template>

<script lang='ts' setup>

import { Refresh, Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { FormInstance } from 'element-plus'
import { DealHealth } from '@/ts/type/Health'
import { isEmpty, shortcuts } from '@/utils/commonUtils'
import { Message } from '@/plugins/element'
import { EventBus } from '@/utils/mitt'

const searchBool = ref<boolean>(false)
const form = ref<DealHealth>({})
const formRef = ref<FormInstance>()
const searchVol = () => {
  const { username, time } = form.value
  if (isEmpty(username as string) && isEmpty(time as string[])) return Message.warning('请检查输入内容')
  searchBool.value = true
  EventBus.emit('searchHealthForm', form.value)
  EventBus.emit('searchHealth', searchBool.value)
}

const reFresh = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  searchBool.value = false
  EventBus.emit('searchHealth', searchBool.value)
}
</script>

<style lang='scss' scoped>
.up {
  display: flex;
  justify-content: space-evenly;
}

:deep(.left .el-form-item) {
  margin-bottom: 0;
}
</style>